<template>
  <div class="app-container">
    <el-empty v-if="devicesIrrigation.length === 0" description="该项目下暂未关联灌溉设备" style="margin-top:240px;" />
    <div v-else>
      <main-header @search="search" @print="print" />
      <div class="h12" />
      <div id="printContainer" ref="printContainer">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane v-for="(item,index) in devicesIrrigation" :key="index" :label="item.name" :name="'activeName'+index">
            <div v-if="activeName === 'activeName'+index">
              <el-card class="bg-white">
                <el-row>
                  <el-col :span="16">
                    <el-tabs v-model="cactiveName">
                      <el-tab-pane label="柱状图" name="first">
                        <el-empty v-if="datas.length === 0" />
                        <div v-else><chart v-if="cactiveName === 'first'" :census-data="censusData" /></div>
                      </el-tab-pane>
                      <el-tab-pane label="表格" name="second">
                        <list :datas="datas" />
                      </el-tab-pane>
                    </el-tabs>
                  </el-col>
                  <el-col :span="8">
                    <info :info-data="infoData" style="margin:32px 0 0 48px;" />
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import MainHeader from './components/main-header'
import Chart from './components/chart'
import Info from './components/info'
import List from './components/list'
import { removeEmptyField } from '@/utils'
import printJS from 'print-js'
import html2canvas from 'html2canvas'
import { mapGetters } from 'vuex'
import { getIrrigationAmount } from '@/api/statistics'
export default {
  components: {
    MainHeader,
    Chart,
    Info,
    List
  },
  data() {
    return {
      activeName: 'activeName0',
      cactiveName: 'first',
      currentIndex: 0,
      censusData: {},
      infoData: {},
      datas: [],
      params: {},
      searchData: {}
    }
  },
  computed: {
    ...mapGetters(['devices']),
    devicesIrrigation() {
      return this.devices.filter((val) => {
        return val.irrigation_field
      })
    },
    device() {
      return this.devicesIrrigation[this.currentIndex]
    }
  },
  watch: {
    currentIndex: {
      handler() {
        if (this.devicesIrrigation.length > 0) {
          const serialno = this.device.rtu_serialno || this.device.serialno
          this.params.serialno = serialno || ''
          this.params.namekey = this.device.irrigation_field || ''
          this.params = Object.assign(this.params, this.searchData)
          this.getIrrigationAmount()
        }
      },
      immediate: true
    }
  },
  methods: {
    async getIrrigationAmount() {
      const { data } = await getIrrigationAmount(removeEmptyField(this.params))
      this.censusData = this.getCensusData(data.data)
      this.infoData = this.getInfoData(data)
      this.datas = data.data.map((val) => {
        val.diff = +val.diff
        return val
      })
    },
    getInfoData(data) {
      const res = {
        total: data.total + ' m³',
        count: data.count,
        max: (data.max.diff || 0) + ' m³',
        min: (data.min.diff || 0) + ' m³',
        name: this.device.name,
        serialno: this.device.serialno
      }
      return res
    },
    handleClick(tab) {
      this.currentIndex = +tab.index
    },
    search(searchData) {
      this.searchData = searchData
      this.params = Object.assign(this.params, searchData)
      this.getIrrigationAmount()
    },
    getCensusData(datas) {
      const columns = ['日期', '灌溉量(m³)']
      const rows = datas.map(val => {
        return {
          '日期': val.time,
          '灌溉量(m³)': +val.diff
        }
      })
      return {
        columns,
        rows
      }
    },
    print() {
      html2canvas(this.$refs.printContainer, {
        backgroundColor: '#fff',
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '灌溉报告',
          imageStyle: 'width:100%;margin:60px auto;'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
